<template>
  <div class="mainFooter">
    <ul class="space-between">
      <li v-for="(item, index) in tabBarList" :key='index' :class="[{'active': tabBar == index}]" @click="changeBar(index)">
        <router-link :to="item.link" v-if="item.icon">
          <div class="icon-wrap align-center">
            <i :class="['icon iconfont', item.url]"></i>
          </div>
          <p class="name">{{item.name}}</p>
        </router-link>

        <img :src="item.url" alt="" class="center-img" v-else>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "mainFooter",
    data() {
      return {
        tabBar: 0,
        tabBarList: [
          {
            icon: true,
            url: 'iconshouye',
            name: '首页',
            link: ''
          },
          {
            icon: true,
            url: 'iconzixun',
            name: '项目',
            link: ''
          },
          {
            icon: false,
            url: '/static/images/icon/icon-footer-btn3.png',
          },
          {
            icon: true,
            url: 'icondianhua',
            name: '联系',
            link: ''
          },
          {
            icon: true,
            url: 'icongongnengtubiao-',
            name: '我的',
            link: '/my'
          }
        ]
      }
    },
    created() {
      
    },
    mounted() {

    },
    methods: {
      changeBar(index) {
        this.tabBar = index
      }
    }
  }
</script>

<style lang="less" scoped>
.mainFooter{
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #ccc;
  height: 120/37.5rem;
  z-index: 99999;
  ul{
    li{
      width: 19%;
      padding: 0.4rem 0 0;
      text-align: center;
      &:nth-child(3){
        width: 24%; 
      }
      a{
        display: block;
        width: 100%;
        height: 100%;
      }
      .icon-wrap{
        width: 70/37.5rem;
        height: 54/37.5rem;
        line-height: 64/37.5rem;
        overflow: hidden;
        margin: 0 auto;
        text-align: center;
        .icon{
          font-size: 50/37.5rem;
          color: #bc9f5b;
        }
      }
      .name{
        font-size: 26/37.5rem;
        color: #666;
        text-align: center;
        margin-top: 0.2rem;
      }
      .center-img{
        height: 90/37.5rem;
      }
      &.active{
        .icon, .name{
          color: #ff7272;
        }
      }
    }
  }
}
</style>